<template>
  <a-time-picker
    style="flex:1"
    :value="value1"
    @change="onChange"
    format="HH:mm"
    :disabledMinutes="disabledMinutes"
    placeholder="选择"
    :disabledHours="disabledHours"
  />
</template>

<script>
import moment from 'moment';
export default {
  inject: ['setting'],
  props: {
    value: {},
    minTime: {},
  },
  data() {
    return {
      moment,
    };
  },
  computed: {
    value1() {
      return this.value && moment(this.value, 'HH:mm');
    },
    max23() {
      return this.setting.isNew
    }
  },
  watch: {
    minTime() {
      if(this.minTime > this.value) {
        this.$emit('input', this.minTime)
      }
    }
  },
  methods: {
    onChange(val) {
      this.$emit('input', val.format("HH:mm"))
    },
    disabledMinutes(hour) {
      if(!this.setting.isNew) {
        return
      }
      if(this.max23 && hour == 23) {
        return Array.from({length: 60}, (val, i) => i+1)
      }
      if (this.minTime && this.minTime?.split(':')[0] == hour) {
        let m = +this.minTime?.split(':')[1];
        return Array.from(new Array(m).keys());
      }
    },
    disabledHours() {
      if(!this.setting.isNew) {
        return
      }
      if (this.minTime) {
        let hour = +this.minTime?.split(':')[0];
        return Array.from(new Array(hour).keys());
      }
    },
  },
};
</script>
